<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="./style/flickerplate.css">
</head>
<body>
    <!-- 头部导航 -->
    <div class="wrap_header">
        <div class="head_box">
            <div class="head_navigator">
                <a class="nav_item" href="./index.html">首页</a>
                <a class="nav_item on" href="./news.html">新闻中心</a>
                <a class="nav_item" href="">企业资讯</a>
                <a class="nav_item" href="">客服中心</a>
                <a class="nav_item" href="">招聘中心</a>
                <a class="nav_search" href=""><i class="icon_search"></i>查询/申请</a>
            </div>
            <h1 class="logo"><img src="./images/logo.png"/><span class="title">苏州奇才充电桩</span></h1>
        </div>
    </div>

    <div class="flicker-example" data-block-text="false">
        <ul>
            <li data-background="./images/slide_03.jpg">
            </li>
            <li data-background="./images/slide_02.jpg">
            </li>
            <li data-background="./images/slide_01.jpg">
            </li>
        </ul>
        <div class="slide_mask"></div>
    </div>

    <div class="wrap_main">
        <div class="news_list">
            <div class="news_item">
                <img class="item_pic" src="./images/product_01.jpg">
                <div class="item_content">
                    <div class="head">
                        <span class="time">2018-09-12 10:20:20</span>
                        <h3 class="title">科技创新、知识产权</h3>
                    </div>
                    <i class="line"></i>
                    <p class="desc">双枪直流充电桩双枪直流充电桩双枪直流充电桩双双枪直流充电桩双枪直流充电桩枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双
                            枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩...</p>
                    <a href="#" class="more">查看详情></a>
                </div>
            </div>
            <div class="news_item">
                <img class="item_pic" src="./images/product_01.jpg">
                <div class="item_content">
                    <div class="head">
                        <span class="time">2018-09-12 10:20:20</span>
                        <h3 class="title">科技创新、知识产权</h3>
                    </div>
                    <i class="line"></i>
                    <p class="desc">双枪直流充电桩双枪直流充电桩双枪直流充电桩双双枪直流充电桩双枪直流充电桩枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双
                            枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩...</p>
                    <a href="#" class="more">查看详情></a>
                </div>
            </div>
            <div class="news_item">
                <img class="item_pic" src="./images/product_01.jpg">
                <div class="item_content">
                    <div class="head">
                        <span class="time">2018-09-12 10:20:20</span>
                        <h3 class="title">科技创新、知识产权</h3>
                    </div>
                    <i class="line"></i>
                    <p class="desc">双枪直流充电桩双枪直流充电桩双枪直流充电桩双双枪直流充电桩双枪直流充电桩枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双
                            枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩...</p>
                    <a href="#" class="more">查看详情></a>
                </div>
            </div>
            <div class="news_item">
                <img class="item_pic" src="./images/product_01.jpg">
                <div class="item_content">
                    <div class="head">
                        <span class="time">2018-09-12 10:20:20</span>
                        <h3 class="title">科技创新、知识产权</h3>
                    </div>
                    <i class="line"></i>
                    <p class="desc">双枪直流充电桩双枪直流充电桩双枪直流充电桩双双枪直流充电桩双枪直流充电桩枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双
                            枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩...</p>
                    <a href="#" class="more">查看详情></a>
                </div>
            </div>
            <div class="news_item">
                <img class="item_pic" src="./images/product_01.jpg">
                <div class="item_content">
                    <div class="head">
                        <span class="time">2018-09-12 10:20:20</span>
                        <h3 class="title">科技创新、知识产权</h3>
                    </div>
                    <i class="line"></i>
                    <p class="desc">双枪直流充电桩双枪直流充电桩双枪直流充电桩双双枪直流充电桩双枪直流充电桩枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双
                            枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩双枪直流充电桩...</p>
                    <a href="#" class="more">查看详情></a>
                </div>
            </div>
        </div>
        <div class="pagination"></div>
    </div>

    <div class="wrap_footer">
        <div class="footer_main clearfix">
            <div class="footer_code">
                <img src="./images/code.png">
                <p class="tip">扫码下载APP，优惠多多</p>
            </div>
            <div class="footer_info">
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
            </div>
        </div>
        <p class="website_info">Copyringht 2018苏州充电桩 ｜<span>All rights reserved</span><span>ICP备：CZ0001234567</span></p>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/modernizr-custom-v2.7.1.min.js"></script>
    <script src="./js/flickerplate.min.js"></script>
    <script src="./js/jquery.page.js"></script>
    <script>
        $('.flicker-example').flicker({
            arrows: true,
            arrows_constraint: false,
            auto_flick: true,
            auto_flick_delay: 4,//秒
            block_text: true,
            dot_navigation: true,
            dot_alignment: 'center',
            flick_animation: 'transition-slide',
            flick_position: 1,
            inner_width: false,
            theme: 'light'
        });

        // 分页
        $('.pagination').jqPaginator({
            totalPages:14,
            visiblePages: 5,
            currentPage: 2,
            prev:'<li class="prev"><a href="javascript:;">上一页</a></li>',
            next:'<li class="next"><a href="javascript:;">下一页</a></li>',
            page: `<li class="page"><a href="javascript:;">{{page}}</a></li>`,
            onPageChange: function (page) {
                console.log(page)
            }
        });
    </script>
            
</body>
</html>